<template>
  <div class="login-container ub main-center cross-center">
    <el-form
      size="medium"
      :rules="rules"
      ref="loginForm"
      :model="loginForm"
      label-width="80px"
      class="login-form"
    >
      <el-form-item label>
        <div class="login-title ub main-center cross-center">系统登录</div>
      </el-form-item>
      <el-form-item label prop="username">
        <el-input type="text" v-model="loginForm.username" maxlength="5" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label prop="password">
        <el-input type="password" v-model="loginForm.password" maxlength="12" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label prop="code">
        <el-row :gutter="10">
          <el-col :span="16">
            <el-input v-model="loginForm.code" maxlength="4" placeholder="请输入验证码"></el-input>
          </el-col>
          <el-col :span="8">
            <!-- TODO:验证码组件 -->
            <div @click="refreshCode()">点击刷新</div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-button class="my-button" type="primary" @click="submit()">登录</el-button>
          </el-col>
          <el-col :span="12">
            <el-button class="my-button" type="primary" @click="resetForm()">重置</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        code: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
        code: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          { min: 4, max: 4, message: "长度为4个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    refreshCode() {
      console.log("刷新验证码");
    },
    submit() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          //TODO:登录验证
          console.log(valid);
        }
      });
      //跳转到admin页面
      this.$router.push("admin");
    },
    //重置登录表单
    resetForm() {
      this.$refs.loginForm.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.login-container {
  height: 100%;
}
.login-title {
  font-size: 24px;
  font-weight: 600;
}
.login-form {
  height: 300px;
  width: 350px;
  border-radius: 10px;
  box-shadow: 0 0 25px #cac6c6;
  padding: 20px 35px;
}
.login-container /deep/ .el-form-item__content {
  margin-left: 0 !important;
}
.my-button {
  width: 100%;
}
</style>